
<%@page import="org.json.JSONObject"%>
<%-- 
    Document   : imageinfo
    Created on : Nov 11, 2010, 9:42:45 AM
    Author     : bertram
--%>

<%@page import="data.PhotoCache"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Map"%>
<%@page import="entities.Artwork"%>
<%@page import="entities.ArtPhoto"%>
<%@page import="data.DataProvider"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="banner.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <script type="text/javascript" src="scripts/jquery-1.4.3.js"></script>
        <script type="text/javascript" src="jquery.easing-1.3.pack.js"></script>
        <script type="text/javascript" src="jquery.mousewheel-3.0.4.pack.js"></script>
        <script src='jquery.form.js' type="text/javascript" language="javascript"></script>
        <script src='jquery.MetaData.js' type="text/javascript" language="javascript"></script>
        <script type="text/javascript" src="jquery.json-1.3.min.js"></script>
        <script type="text/javascript" src="fancybox.js"></script>
        <link rel="stylesheet" href="css/jquery.autocomplete.css" type="text/css" />
        <script type="text/javascript" src="jquery.bgiframe.min.js"></script>
        <script type="text/javascript" src="jquery.autocomplete.js"></script>
        <link rel="stylesheet" href="css/fancybox.css" type="text/css" media="screen" />

        <%try {
                        new data.Auth().checkAuth(request);
                    } catch (exceptions.AuthException aux) {
                        response.sendRedirect("login.html");
                    }%>
        <%
                    DataProvider dt = DataProvider.getInstance();
                    Artwork work = null;
                    ArrayList<ArtPhoto> photos = null;
                    if (request.getParameterMap().containsKey("cacheID")) {
                        photos = PhotoCache.getPhotos(request.getParameter("cacheID"));
                        JSONObject obj = null;

                    }
                    if (request.getParameterMap().containsKey("vaerkID")) {
                        work = dt.getWork(Integer.parseInt(request.getParameter("vaerkID")));
                        if (photos != null) {
                            photos.addAll(work.getPhotos().values());
                        } else {
                            photos = new ArrayList<ArtPhoto>();
                            for (ArtPhoto p : work.getPhotos().values()) {
                                photos.add(p);
                            }
                        }
                    }%>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <SCRIPT TYPE="text/javascript">
            var photos = [];
           
            $(document).ready(function() {
            <%if (work != null) {%>
                    var workID = <%=work.getWorkID()%>
                    $("#workID").val(workID);
                    $.ajax({
                        url: 'works/'+workID,
                        type: 'POST',
                        dataType: 'json',
                        timeout: 30000,
                        data: "workID="+workID,
                        error: function(json){
                            alert('Error loading JSON');
                            parent.$.fancybox.close();
                        },
                        success: function(json){

                            $("#kidID").val(json.reginID);
                            $("#workID").val(json.workID);
                            $("#titelfelt").val(json.title);
                            $("#aarstalfelt").val(json.finished);
                            $("#museumfelt").val(json.owner);
                            $("#materialerfelt").val(json.technique);
                            $("#beskrivelsefelt").val(json.description);
                            document.getElementById("typefelt").selectedIndex = json.type - 1;
                            var artists = json.kunstnere;
                            $("#kunstnerfelt").val("");
                            $.each(artists, function() {

                                $("#kunstnerfelt").val( this.name);
                            });
                        }
                    });

            <%}%>
                    $.getJSON("kidtyper", function(result) {
                        var options = $("#typefelt");
                        //don't forget error handling!
                        $.each(result, function(item) {
                            options.append($("<option />").val(this.index).text(this.value));
                        });
                    });




                    $("#hentfraKidKnap").click(function(){
                        kiid = $("#kididbox").val();
                        updateByKid(kiid);
                    });
                    $("#kunstnerfelt").autocomplete("artists/ac").result(function(event, data){
                        strArr = data.toString().split(" ");
                        $("#kunstnerID").val(strArr[0]);
                        var artName;
                        
                        $("#kunstnerfelt").val(strArr[1] + " " + strArr[2]);

                  
                    });
                    $('#thumbs').click(function(event) {
                        id = event.target.id;
                        showImages(id);
                        tester();
                    });

                  
            <%for (int i = 0; i < photos.size(); i++) {%>
                    photos[<%=i%>] = <%=photos.get(i).toJson()%>;
            <%}%>
                    showImages(0);
                    $.each(photos, function(index, value){
                        if(this.type != "image/tiff")
                        {
                          
                            $("#thumbs").append("<a href='#"+index+"'>"+
                                "<img src='thumbs/"+this.imageID+".jpg' height='100' id='"+index+"' border='0'/>"+
                                "</a>&nbsp"
                        );}
                    });
                    $("#various5").fancybox();
                    $("#infobox").submit(function() {
                        var data = $.toJSON($('form').serializeObject());
                        data.photos = photos;
                        data.types = $("#typefelt").val();
                        $.ajax({
                            url: 'storework.do',
                            type: 'POST',
                            dataType: 'json',
                            timeout: 30000000,
                            data: "data="+data,
                            error: function(text){
                                $("#messages").text("gemt i databasen");
                            },
                            success: function(json){

                                $("#messages").text("gemt i databasen");
                                window.location.href = "showwork.jsp?vaerkID="+json.workID
                                showImages(0);
                            }
                        });

                        return false;
                    });
                });
                function tester()
                {
                    var v = $( "#typefelt" ).val();
                  

                }
                $.fn.serializeObject = function()
                {
                    var o = {};
                    var a = this.serializeArray();
                    $.each(a, function() {
                        if (o[this.name]) {
                            if (!o[this.name].push) {
                                o[this.name] = [o[this.name]];
                            }
                            o[this.name].push(this.value || '');
                        } else {
                            o[this.name] = this.value || '';
                        }
                    });
                    o["photos"] = photos;
                    o["types"] = $( "#typefelt" ).val();

                    return o;
                };

                function showImages(pictureid)
                {
                    document.getElementById("frame").src="images/"+photos[pictureid].path;
                    $("#picture-data").text("type: "+ photos[pictureid].type + " url: http://billeddeling.dk/test/images/"+photos[pictureid].path+ " uploaded af: "+photos[pictureid].providedBy);
                }

                function popupform(myform, windowname)
                {
                    if (! window.focus)return true;
                    popup = window.open('', windowname, 'height=600,width=500,scrollbars=yes');
                    myform.target=windowname;
                    return true;
                }
                function closeFancyBox()
                {
                    parent.$.fancybox.close();
                }
                function updateByKid(id)
                {
                
                    $.ajax({
                        url: 'kidinfo.do',
                        type: 'POST',
                        dataType: 'json',
                        timeout: 30000,
                        data: "kidID="+id,
                        error: function(json){
                            alert('Error loading JSON');
                            parent.$.fancybox.close();
                        },
                        success: function(json){
                            
                            $("#kidID").val(json.reginID);
                            $("#workID").val(json.workID);
                            $("#titelfelt").val(json.title);
                            $("#aarstalfelt").val(json.finished);
                            $("#museumfelt").val(json.owner);
                            $("#materialerfelt").val(json.technique);
                            $("#beskrivelsefelt").val(json.description);
                            document.getElementById("typefelt").selectedIndex = json.type - 1;
                            var artists = json.kunstnere;
                            $("#kunstnerfelt").val("");
                            $.each(artists, function() {
                          
                                $("#kunstnerfelt").val( this.name);
                            });
                        }
                    });
                };
            
        </SCRIPT>

        <%
                    /*vi bliver nødt til lige at have en smule request parsing logik
                    for at finde ud af hvad vi skal vise.*/


        %>
        <title>Værk information</title>
    </head>
    <body>

        <div id="main">

            <%
                        //Map test = request.getParameterMap();
                        //int imageID = Integer.parseInt(request.getParameter("billedID"));
                        ArtPhoto pht = photos.get(0);
                        String phtPath = pht.getPath();
                        //int workID = Integer.parseInt(request.getParameter("vaerkID"));

                        Artwork kidWork;
                        String title = "";
                        String kunstner = "";
                        if (request.getParameterMap().containsKey("kidID")) {
                            kidWork = dt.getWorkByKidID(Integer.parseInt(request.getParameter("kidID")));
                        }
            %>
            <table>


                <tr>
                    <td>
                        <div id="show-picture">
                            <% if (pht != null) {%> <img src="" width="400" alt="billede" id="frame"/>

                        </div>
                    </td>
                    <td>
                        <div id="edit-info">

                            <input type="text" name="kidid" id="kididbox">
                            <input type="submit" name="btn" value="hent oplysninger via kid id" id="hentfraKidKnap">

                            <form action="storework.do" method="POST" id="infobox">
                                <input type="hidden" name="workID" id="workID">
                                <input type="hidden" name="kidID" id="kidID">
                                <input type="hidden" name="kunstnerID" id="kunstnerID">
                                <table >
                                    <tr><td>Titel : </td><td><input type="text" name="titel" id="titelfelt"/></td><td><a id="various5" class="iframe" href="gsearchresults.jsp">søg</a></td></tr>
                                    <tr><td>Kunster : </td><td><input type="text" name="kunstner" id="kunstnerfelt"/>
                                    <tr><td>Årstal : </td><td><input type="text" name="aarstal" id="aarstalfelt"/></td></tr>
                                    <tr><td>Museum : </td><td><input type="text" name="museum"id="museumfelt"/></td></tr>
                                    <tr><td>Objekttype : </td><td><select name="types"id="typefelt"></select></td></tr>
                                    <tr><td>Materialer/Teknik</td><td><input type="text" name="materialer" id="materialerfelt"/></td></tr>
                                    <tr><td>Proveniens : </td><td><input type="text" name="proveniens" id ="proveniensfelt"/></td></tr>
                                    <tr><td>Beskrivelse : </td><td><textarea cols="22" rows="4"  name="beskrivelse" id="beskrivelsefelt"></textarea></td></tr>
                                    <tr><td>Tags:</td><td> <input type="text" name="tags" id="tagsfelt"/></td></tr>
                                </table>
                                <p class="info">(tags er enkelte ord eller korte sætninger der beskriver en egenskab ved værket,
                                    <br />f.eks, et element i motivet eller en kunstretning. Tags adskilles med et komma.</p>

                                <input type="submit" value="Gem" id="saveBtn" />


                                <div id="besk">
                                    <p id="messages">
                                    </p>
                                </div>


                            </form>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="picture-data">
                            <br /> type: <%=pht.getType()%><%}%>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="thumbs">
                            Billeder knyttet til dette værk:<br />
                        </div>
                    </td>
                </tr>


            </table>
        </div>

    </body>
</html>
